<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>文件管理库</title>
    <link rel="stylesheet" th:href="@{/myconfig/layui/css/layui.css}" media="all">
    <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
</head>
<body>

<table class="layui-hide" id="demo" lay-filter="test" lay-data="{id: 'idTest'}">
</table>

<script th:src="@{/myconfig/layui/layui.js}"></script>

<script type="text/html" id="mytoolbar">
    <div class="layui-table-tool-temp">
        <div class="layui-form-item">
            <form class="layui-form" action="">
                <div class="layui-input-block" style="margin: 0 0 0 5px;width: 20%;float: left;">
                    <input type="text" name="fileName" lay-verify="title" autocomplete="off" placeholder="请输入文件名" class="layui-input">
                </div>
                <div style="float: left">
                    <button class="layui-btn" lay-submit lay-filter="formSearch">搜索</button>
                </div>
            </form>
            <div style="margin-left: 15px;float: left">
                <button class="layui-btn layui-btn-warm" lay-event="add" data-method="setTop" shiro:hasPermission="file_upload">
                    <i class="layui-icon">&#xe67c;</i>文件上传</button>
                </button>
                <button class="layui-btn layui-btn-normal" lay-event="update" shiro:hasPermission="file_update">
                    <i class="layui-icon">&#xe642;</i>修改文件信息</button>
                </button>
                <button class="layui-btn layui-btn-danger" lay-event="delete" shiro:hasPermission="file_delete">
                    <i class="layui-icon">&#xe640;</i>删除文件</button>
                </button>
                <button class="layui-btn layui-btn-warm" lay-event="download" shiro:hasPermission="file_download">
                    <i class="layui-icon">&#xe601;</i>下载文件</button>
                </button>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p style="color: red;">备注：未公开的文件不能下载</p>
        </div>

    </div>


</script>

<script th:inline="none">

    layui.config({
        version: '1554901098009' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
        var  laypage = layui.laypage //分页
            ,table = layui.table //表格
            ,form = layui.form;
        //执行一个 table 实例
        var $ = layui.$;
        $.ajax({
            type: "post",
            url: 'fileshow/fileList' //数据接口, // 数据接口
            ,success: function (result) {
                data = result.files;
                //alert(data);
                table.render({
                    elem: '#demo'
                    ,unresize: false
                    ,height: 630
                    ,id: 'idTest'
                    ,title: '文件表'
                    ,toolbar: '#mytoolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    ,data: data
                    ,cols: [[
                        {type: 'checkbox', fixed: 'left'}
                        ,{field: 'fileId', title: '文件ID', width:'10%'}
                        ,{field: 'fileName', title: '文件名称', width:'15%'}
                        ,{field: 'fileSize', title: '文件大小', width:'10%'}
                        ,{field: 'fileTypeName', title: '文件类型',  width:'10%', sort: true,unresize: false}
                        ,{field: 'userName', title: '创建人',  width:'10%',unresize: false, sort: true}
                        ,{field: 'itemName', title: '所属事项',  width:'10%'}
                        ,{field: 'fileState', title: '状态',  width:'10%'}
                        ,{field: 'fileTime', title: '上传时间',  width:'10%'}
                    ]] //设置表头
                    ,page:true
                    ,limits: [5, 10, 15,20] //每页显示个数
                    ,limit: 10 //每页默认显示的数量
                    ,group:5   //页码最多显示个数
                });
            }
        });

        //查询
        form.on('submit(formSearch)',function (data) {
            $.ajax({
                type: "post",
                url: 'fileshow/search' //数据接口, // 数据接口
                ,data:data.field
                ,success: function (result) {
                    data = result.files;
                    table.render({
                        elem: '#demo'
                        ,unresize: false
                        ,height: 630
                        ,id: 'idTest'
                        ,title: '文件表'
                        ,toolbar: '#mytoolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        ,data: data
                        ,cols: [[
                            {type: 'checkbox', fixed: 'left'}
                            ,{field: 'fileId', title: '文件ID', width:'10%'}
                            ,{field: 'fileName', title: '文件名称', width:'15%'}
                            ,{field: 'fileSize', title: '文件大小', width:'10%'}
                            ,{field: 'fileTypeName', title: '文件类型',  width:'10%', sort: true,unresize: false}
                            ,{field: 'userName', title: '创建人',  width:'10%',unresize: false, sort: true}
                            ,{field: 'itemName', title: '所属事项',  width:'10%'}
                            ,{field: 'fileState', title: '状态',  width:'10%'}
                            ,{field: 'fileTime', title: '上传时间',  width:'10%'}
                        ]] //设置表头
                        ,page:true
                        ,limits: [5, 10, 15,20] //每页显示个数
                        ,limit: 10 //每页默认显示的数量
                        ,group:5   //页码最多显示个数
                    });
                }
            });
            return false;
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2 //此处以iframe举例
                        ,title: '文件上传'
                        ,area: ['600px', '500px']
                        ,shade: 0
                        ,maxmin: true
                        ,content: 'file_manage_upload.html'
                        ,zIndex: layer.zIndex //重点1
                        ,success: function(layero, index){

                        }
                    });
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        //layer.alert('编辑 [id]：'+ checkStatus.data[0].fileId);
                        layer.open({
                            type: 2 //此处以iframe举例
                            ,title: '修改文件信息'
                            ,area: ['600px', '500px']
                            ,shade: 0
                            ,maxmin: true
                            ,content: 'file_manage_update.html'
                            ,zIndex: layer.zIndex //重点1
                            ,success: function(layero,index){
                                var iframe = window['layui-layer-iframe'+index];
                                iframe.init(checkStatus.data[0].fileId);
                            }

                        });
                    }

                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择要删除的文件',{
                            icon:0
                        });
                    } else {

                        layer.confirm('确认删除？', function(index){
                            var deletelist = [];
                            for (var i = 0;i < checkStatus.data.length;i++){
                                deletelist[i] = checkStatus.data[i].fileId
                            }
                            //向服务端发送删除指令
                            $.ajax({
                                url:'fileoper/deleteFile'
                                ,data:{'deletelist':deletelist}
                                ,success:function (result) {
                                    if (result.code == 200){
                                        layer.msg("删除成功",{
                                            icon:6
                                        })
                                        setTimeout("window.location.reload()",1000);
                                    } else{
                                        layer.msg("删除失败"),{
                                            icon:5
                                        }
                                    }
                                }
                            })

                        });
                    }
                    break;
                case 'download':
                    if(data.length === 0){
                        layer.msg('请选择要下载的文件',{
                            icon:0
                        });
                    }else if(data.length > 1){
                        layer.msg('只能选择一行下载',{
                            icon:0
                        });
                    } else {
                        layer.confirm('确认下载？', {
                            btn: ['确认','取消']
                        },function(index){
                            var data = checkStatus.data[0].fileId;
                            var state = checkStatus.data[0].fileState;
                            var fileId = JSON.stringify(data);
                            var fileSta = JSON.stringify(state);
                            //alert("状态"+fileSta)
                            //alert(fileId);
                            if (fileSta == '"未公开"'){
                                layer.msg('文件未公开，不能下载', {icon: 0});
                                return;
                            }
                            //向服务端发送下载指令
                            layer.msg('开始下载', {icon: 1});
                            getFile(fileId);

                        });
                    }
            }
        });


    });
</script>
<script>
    function getFile(fileId){
        window.location.href = "fileoper/download?fileId="+fileId;
    }
</script>
</body>
</html>
